<article>
    <h1><?php echo $GLOBALS['title'] ?></h1>
    <p>当我们定义一条样式规则时候，这条样式规则会作用于网页当中的某  些元素，选择器是一种模式，用于选择需要添加样式的元素。</p>
    <h2><a>id选择器</a></h2>
    <p>唯一的，一个页面只出现一次，一般用于JS的获取元素，以 "#" 来定义</p>
    <p>下面的两个 <code>id</code>  选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：</p>
    <pre><code><?php echo htmlspecialchars('
<style type="text/css">
	#red {color:red;}
	#green {color:green;}
	p#red{
		color:blue;
	}
</style>') ?></code></pre>
	<p>下面的 HTML 代码中，<code>id</code> 属性为 <code>red</code> 的 <code>p</code> 元素显示为红色，而 <code>id</code> 属性为 <code>green</code> 的 <code>p</code> 元素显示为绿色。</p>
    <pre><code><?php echo htmlspecialchars('
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>') ?></code></pre>
	<h2><a>类选择器</a></h2>
	<p>作用于一类标签的，需要的加上这个类名就可以,类选择器以一个点号显示：</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	.center {text-align: center}
	h1.center{font-size:14px;}
</style>') ?></code></pre>
	<p>在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。</p>
	<p>在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。</p>
	<pre><code><?php echo htmlspecialchars('
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>') ?></code></pre>
	<h2><a>标签选择器</a></h2>
	<p>作用于同一个标签,以标签名为选择器：</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	p {text-align: center}
</style>') ?></code></pre>
	<p>下面的 HTML 代码中，标签为<code>p</code>都会被作用到</p>
    <pre><code><?php echo htmlspecialchars('
<p>我是P标签包含的</p>
<h1>我是H1标签包含的</h1>
<p>我是P标签包含的</p>') ?></code></pre>
	<h2><a>群组选择器</a></h2>
	<p>同时匹配所有<code>p</code>元素或<code>td</code>元素，<code>li</code>元素,之间用逗号分隔</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	p, td, li {
	line-height:20px;
	color:#c00;
	}
</style>') ?></code></pre>
	<h2><a>后代选择器</a></h2>
	<p>后代元素选择器，匹配所有属于#nav元素后代的li元素</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	#nav li { 
		display:inline; 
	}
</style>') ?></code></pre>
	<h2><a>通用选择器</a></h2>
	<p>通用选择器用<code>*</code>来表示，作用于所有元素，一般在项目初始化时使用</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	* { 
		font-family: "微软雅黑";
	}
</style>') ?></code></pre>
	<h2><a>伪类选择器</a></h2>
	<p>同一个元素在不同状态下的不同样式</p>
	<p>下面例子：选择鼠标指针浮动在其上的元素，并设置其样式：</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	a:hover{ 
		background-color:yellow;
	}
</style>') ?></code></pre>
	<p><a href="http://www.w3school.com.cn/cssref/css_selectors.asp">更多伪类选择器</a></p>

	<h2><a>css的继承性和叠加性</a></h2>
	<h4>继承性</h4>
	<p>后代元素会继承前辈元素的一些文字属性和样式</p>
	<h4>叠加性</h4>
	<p>同一个元素，被多个样式规则指定。</p>
	<h2><a>选择器的优先级</a></h2>
	<p>所谓的优先级，指的就是哪条样式规则会最终作用于指定的元素</p>
	<img src="__PUBLIC__/images/css.png" alt="">

	<h2><a>块元素和行内元素</a></h2>
	<p>我们已经学习了很多的HTML标签，不同的标签有不同的特性，  比如从文档流的角度区分，那么标签元素分为块标签与行标签</p>
	<h3>块元素</h3>
	<p>块标签即标签元素是一个块，即有宽、高属性，同时块标签会独  占一行，比如说H1～H6、P、li等标签都是块标签，当然也包括  我们即将学习的DIV标签</p>
	<h3>行内元素</h3>
	<p>行标签正好与块标签意义相反，行标签不具有宽、高特性，也不会占一行，所以我们  可以利用行标签对文字进行区块指定不同的CSS样式达到不同的  效果，行标签也很多，如<code>em</code>、<code>span</code>标签等</p>

	<h2><a>行内块级元素</a></h2>
	<ul>
		<li>既有行元素的属性即:不会独占一行</li>
		<li>又有块元素的属性即：可以设置宽高</li>
		<li>Html中这种元素比较少</li>
		<li>比如:<img /> 还有表单元素</li>
	</ul>
	<p><a>注意：</a>所的标签行，块属性都可以互相转换。</p>

	<h2><a>CSS命名规范</a></h2>
	<ul>
		<li>对于页面中具有唯一性、结构性的模块，使用id选择器，其他  一般采用class选择器</li>
		<li>选择器命名一律使用小写字母</li>
		<li>要有合理的注释</li>
		<li>结构上有父子包含关系的样式，应通过命名体现。</li>
		<li>命名使用驼峰结构+横线，即同一对象的命名如果需要多个单  词，使用驼峰命名法则，如：boxMusic</li>
		<li>名字不能以数字开头</li>
		<li>命名的时候一定要有意义</li>
	</ul>

</article>



	
